import { BasicColumn } from '/@/components/Table';
import { FormSchema } from '/@/components/Table';
import { Tag } from "ant-design-vue";
import { h } from 'vue'
import { formatToDate, formatToDateTime } from "/@/utils/dateUtil";


export const columns: BasicColumn[] = [
  {
    title: '姓名',
    dataIndex: 'name',
    width: 120,
    align: 'left',
  },
  {
    title: '工号',
    dataIndex: 'code',
    width: 100,
    align: 'left'
  },
  {
    title: '部门',
    dataIndex: 'deptName',
    width: 120,
    align: 'left'
  },
  {
    title: '状态',
    dataIndex: 'status',
    width: 60,
    customRender: ({ record }) => {
      const status = record.status;
      const enable = ~~status === 1;
      const color = enable ? 'green' : 'red';
      const text = enable ? '在职' : '离职';
      return h(Tag, { color: color }, () => text);
    },
  },
  {
    title: '邮箱',
    dataIndex: 'user.email',
    width: 120,
    customRender: ({ record }) => {
      const email = record.user?.email;
      return email;
    },
  },
  {
    title: '手机',
    dataIndex: 'user.mobile',
    width: 120,
    customRender: ({ record }) => {
      const mobile = record.user?.mobile;
      return mobile;
    },
  },
  {
    title: '更新时间',
    dataIndex: 'updateTime',
    width: 130,
    customRender: ({ text }) => {
      return text ? formatToDateTime(text) : '';
    }
  }
];

export const searchFormSchema: FormSchema[] = [
  {
    field: 'keyword',
    label: '关键字',
    component: 'Input',
    componentProps: {
      placeholder: '请输入姓名/工号/手机/邮箱',
    },
    labelWidth: 60,
    colProps: { span: 8, lg: { span: 8, offset: 0 }, sm: { span: 14, offset: 0 }, xs: { span: 16, offset: 0 } },
  }
];

export const personalFormSchema: FormSchema[] = [
  {
    field: 'id',
    label: 'ID',
    required: false,
    component: 'Input',
    show: false,
  },
  {
    field: 'name',
    label: '姓名',
    component: 'Input',
    required: true,
    colProps: {
      span: 9,
    },
    rules: [
      {
        required: true,
        whitespace: true,
        message: '姓名不能为空！',
      },
      {
        max: 20,
        message: '字符长度不能大于20！',
      },
    ],
  },
  {
    field: 'code',
    label: '工号',
    component: 'Input',
    required: true,
    colProps: {
      span: 9,
    },
  },
  {
    field: 'sex',
    label: '性别',
    component: 'RadioButtonGroup',
    defaultValue: 1,
    componentProps: {
      options: [
        { label: '男', value: 1 },
        { label: '女', value: 0 },
      ],
    },
    colProps: { span: 9 },
  },
  {
    field: 'status',
    label: '在职状态',
    component: 'RadioButtonGroup',
    defaultValue: 1,
    componentProps: {
      options: [
        { label: '在职', value: 1 },
        { label: '离职', value: 0 },
      ],
    },
    colProps: { span: 9 },
  },

  {
    field: 'deptId',
    label: '所属部门',
    component: 'TreeSelect',
    colProps: {
      span: 12,
    },
    componentProps: {
      treeNodeFilterProp: 'name',
      getPopupContainer: () => document.body,
    },
    required: true,
  },

  // status
];
